<template>
  <scroller class="page">
    <div class="input-box">
      <text class="price-mark">￥</text>
      <input class="input" type="number" placeholder="请输入充值金额" v-model="price" @input="selectedIndex = ''"></div>
    </div>
    <text class="list-title">充值金额</text>
    <div class="list">
      <div class="item" :class="[selectedIndex === index ? 'item-selected' : '']" v-for="(item, index) in list" @click="select(index)">
        <text class="item-text" :class="[selectedIndex === index ? 'item-text-selected' : '']">{{ item }} 元</text>
      </div>
    </div>
    <Footer />
    <div class="bottom" @click="submit">
      <text class="bottom-text">充值</text>
    </div>
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
// import Toolbar from '@/components/Toolbar';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const event = weex.requireModule('event');
export default {
  name: 'App',
  components: {
    // Toolbar,
    Footer
  },
  data() {
    return {
      price: '',
      list: [10, 20, 30, 40, 50, 100],
      selectedIndex: ''
    }
  },
  mounted() {
    event.initData(JSON.stringify({'title':'充值'}), json => {
      this.init();
    })
  },
  methods: {
    init() {
      // var url = '/yq/user';
      // var params = {};
      // var success = res => {
      //   console.log(res);
      //   this.userInfo = res.info;
      // }
      // var fail = res => {
      //   modal.toast({
      //     message: '获取数据失败',
      //     duration: 1
      //   })
      // }
      // utils.request(url, params, success, fail);
    },
    select(index) {
      this.selectedIndex = index;
      this.price = this.list[this.selectedIndex];
    },
    submit() {
      console.log(this.price);
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding: 30px 0 150px;
}

.input-box {
  padding: 30px;
  flex-direction: row;
  align-items: center;
}

.price-mark {
  width: 50px;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: bold;
}

.input {
  width: 640px;
  height: 100px;
  font-size: 42px;
}

.list-title {
  font-size: 38px;
  font-weight: bold;
  margin-bottom: 30px;
  padding-left: 30px;
}

.list {
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 210px;
  height: 120px;
  margin: 0 0 30px 30px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #888;
  border-radius: 12px;
}

.item-selected {
  background-color: #527a5f;
}

.item-text {
}

.item-text-selected {
  color: #fff;
  font-weight: bold;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #527a5f;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 110px;
}

.bottom-text {
  color: #fff;
}
</style>